<template>
	<view class="content">
		<view class="bigimgbox">
			<img :src="this.songsdataitem.picurl" alt="" class="itemimg">
		</view>
		<view class="video">
			<audio @error="error" @ended="endsongs" @play="play" @timeupdate="changecurrent" class="audio" style="text-align: center"
				:src="this.songsdataitem.url" :name="this.songsdataitem.name" :author="this.songsdataitem.artistsname"
				:autoplay="true" :auto-pause-if-navigate="true" :controls="true"
				:poster="this.songsdataitem.picurl"></audio>
		</view>
		<scroll-view @scroll="scroll" :scroll-top="scrolltop" scroll-y="true" style="height: 30px;"
			class="scroll-content" scroll-with-animation="true">
			<view class="item" :class='currenttime*1000>=item.timer&&currenttime*1000<=item.pre?"active":"slyric"'
				v-for="item,index in lyric" :key="index">
				{{item.lrc}}
			</view>
		</scroll-view>
		<scroll-view @scroll="scroll" :scroll-top="scrolltop" scroll-y="true" style="height: 180px;"
			class="scroll-content" scroll-with-animation="true">
			<view class="itemlyric" v-for="item,index in lyric" :key="index">
				{{item.lrc}}
			</view>
		</scroll-view>
		<view class="but">
			<button type="default" @click="changeSongs" style="background-color: #02d15f;margin-left: 30%;" size="mini"
				plain="true">点击随机切换歌曲</button>
		</view>
	</view>
</template>

<script>
	import music from '@/common/api/request.js'
	export default {
		data() {
			return {
				songsdataitem: {},
				id: '',
				songslyric: '',
				currenttime: 0,
				scrolltop: 0,
				sildertant: 0,
				scrollHeight: 0,
				songitem:{}
			}
		},
		onReady() {},
		onLoad() {
				this.getrecommenddata()
			uni.$on('getsongitem', (data) => {
				console.log(data)
				this.songsdataitem.picurl = data.al.picUrl
				this.songsdataitem.name = data.name
				this.songsdataitem.artistsname = data.ar[0].name
				this.getnewsong(data.id)
			}),
			 uni.$on('getsearchsongitem', (data) => {
			 	this.songsdataitem.picurl = data.al.picUrl
			 	this.songsdataitem.name = data.name
			 	this.songsdataitem.artistsname = data.ar[0].name
				this.getnewsong(data.id)
			 })// '上海'

		},
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:'/common/index/search/search'
			})
		},
		methods: {
			error(e){
				console.log(e)
			},
			endsongs() {
				this.getrecommenddata()
			},
			changeSongs() {
				this.getrecommenddata()
			},
			play() {},
			scroll(detail) {
				this.scrollHeight = detail.detail.scrollHeight
			},
			changecurrent(detail) {
				this.currenttime = detail.detail.currentTime
				this.sildertant = detail.detail.currentTime / detail.detail.duration
				this.scrolltop = this.scrollHeight * this.sildertant
			},
			getrecommenddata() {
				uni.request({
					url: 'https://api.uomg.com/api/rand.music?sort=热歌榜&format=json',
					method: 'GET',
					success: (res) => {
						this.songsdataitem = res.data.data
						let index = this.songsdataitem.url.lastIndexOf("=")
						let id = this.songsdataitem.url.substring(index + 1, this.songsdataitem.url.length);
						this.getsongslyric(id)
					}
				})
			},
			getsongslyric(id) {
				uni.showLoading({
					title:'客官别急，歌词正在赶来的路上'
				})
				music.request({
					url: `/lyric?id=${id}`
				}).then((data) => {
					this.songslyric = data.data.lrc.lyric
					uni.hideLoading()
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			getnewsong(id){
				music.request({
					url: `/song/url?id=${id}`
				}).then((data) => {
					console.log(data)
					this.songsdataitem.url = data.data.data[0].url
					this.getsongslyric(id)
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
		},
		computed: {
			lyric: function() {
				let arr;
				if (this.songslyric) {
					arr = this.songslyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
						let min = item.slice(1, 3)
						let sec = item.slice(4, 6)
						let mill = item.slice(7, 10)
						let lrc = item.slice(11, item.length)
						let timer = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
						if (isNaN(Number(mill))) {
							mill = item.slice(7, 9)
							lrc = item.slice(10, item.length)
							timer = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
						}
						return {
							min,
							sec,
							mill,
							lrc,
							timer
						}
					})
					arr.forEach((item, index) => {
						if (index === arr.length - 1) {
							item.pre = 0
						} else {
							item.pre = arr[index + 1].timer
						}
					})
				}
				return arr
			}
		},
	}
</script>

<style>
	.bigimgbox {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.itemimg {
		margin-top: 60rpx;
		width: 600rpx;
		height: 60 0rpx;
		border-radius: 60rpx;
		border: 2rpx solid white;
	}

	.video {
		margin-top: 50rpx;
		margin-left: 7%;
	}

	.slyric {
		color: #bfbfbf;
		text-align: center;
		font-size: 30rpx;
		display: none
	}

	.scroll-content {
		margin-top: 30rpx;
	}

	.itemlyric {
		color: #bfbfbf;
		text-align: center;
		font-size: 30rpx;
	}

	.active {
		text-align: center;
		color: #02d15f;
		font-size: 38rpx;
	}
</style>
